<template>
	<view class="record-case">
		<!-- tab选项卡 -->
		<view class="record-case-tabs">
			<v-tabs
				v-model="current"
				:tabs="tabs"
				:scroll="false"
				color="#333333"
				activeColor="#34D1A9"
				fontSize="32rpx"
				lineHeight="6rpx"
				lineColor="#34D1A9"
				lineRadius="22rpx"
				lineScale="0.3"
				@change="changeTab"
				fixed="true"
			></v-tabs>
		</view>
		<!-- 就诊列表 -->
		<view class="record-list">
			<view class="record-item" v-for="(item, index) in list" :key="index" @click="toRecordDetail">
				<view class="record-item-top">
					<text class="record-item-time">2021/07/17 8:40 第10号</text>
					<text class="record-item-status">已预约</text>
				</view>
				<view class="record-item-doctor-info">
					<image class="doctor-img" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
					<view class="record-item-doctor-info-right">
						<view class="record-item-doctor-name">
							<text>曹雨声</text>
							<text>动物医院院长</text>
						</view>
						<view class="record-item-doctor-number">执业编号：A012938790087</view>
					</view>
				</view>
				<view class="record-item-pet">
					<text>就诊宠物</text>
					<text>八月</text>
				</view>
			</view>
		</view>
		<!-- 结束图片 -->
		<end-img />
	</view>
</template>

<script>
import vTabs from '@/components/v-tabs/v-tabs.vue';
import EndImg from '@/components/endImg/endImg.vue';
export default {
	components: {
		vTabs,
		EndImg
	},
	data() {
		return {
			current: 0,
			tabs: ['全部', '已预约', '已就诊', '已取消'],
			list: [1, 2, 3, 4, 5]
		};
	},
	methods: {
		// tab切换
		changeTab(event) {
			console.log(event);
		},
		// 跳转就诊详情
		toRecordDetail() {
			uni.navigateTo({
				url: `/pagesRecord/recordDetail/recordDetail`
			});
		}
	},
	onLoad(options) {}
};
</script>

<style scoped lang="scss">
.record-case {
	padding: 0 0 20rpx;
	.record-case-tabs {
		margin-bottom: 24rpx;
	}
	.record-list {
		padding: 0 32rpx;
		.record-item {
			padding: 28rpx 0 20rpx;
			font-size: 28rpx;
			position: relative;
			&::before {
				content: '';
				width: 98%;
				height: 2rpx;
				background: #f1f1f1;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 0;
			}
			&:nth-last-of-type(1)::before {
				height: 0;
			}
			.record-item-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;
				.record-item-time {
					color: #999999;
				}
				.record-item-status {
					color: #34d1a9;
				}
			}
			.record-item-doctor-info {
				display: flex;
				margin-bottom: 20rpx;
				.doctor-img {
					width: 116rpx;
					height: 116rpx;
					background: #dcdddd;
					border-radius: 16rpx;
					margin-right: 16rpx;
				}
				.record-item-doctor-info-right {
					flex: 1;
					.record-item-doctor-name {
						display: flex;
						align-items: center;
						color: #666666;
						margin-bottom: 8rpx;
						& > text:nth-of-type(1) {
							font-size: 36rpx;
							font-weight: 500;
							color: #333333;
							line-height: 50rpx;
							margin-right: 20rpx;
						}
					}
					.record-item-doctor-number {
						color: #666666;
						line-height: 40rpx;
					}
				}
			}
			.record-item-pet {
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
				& > text:nth-of-type(1) {
					margin-right: 28rpx;
				}
			}
		}
	}
}
/* 
	 				<view class="record-item-doctor-number">执业编号：A012938790087</view>
	 			</view>
	 		</view>
	 		<view class="record-item-pet">
	 			<text>就诊宠物</text>
	 			<text>八月</text>
	 		</view>
	 	</view>
	 */
</style>
